<template>
  <view class="container">
    <view class="title">Excel数据导入</view>
    
    <!-- 文件选择按钮 -->
    <button class="upload-btn" @click="chooseExcel">选择Excel文件</button>
    
    <!-- 显示选中的文件名 -->
    <view class="file-info" v-if="fileName">
      已选择: {{ fileName }}
    </view>
    
    <!-- 预览数据区域 -->
    <view class="preview" v-if="tableData.length > 0">
      <view class="preview-title">数据预览:</view>
      <scroll-view class="scroll-view" scroll-x="true">
        <view class="table">
          <view class="tr header">
            <view class="td" v-for="(item, index) in tableHeader" :key="index">{{ item }}</view>
          </view>
          <view class="tr" v-for="(row, rowIndex) in tableData" :key="rowIndex">
            <view class="td" v-for="(col, colIndex) in row" :key="colIndex">{{ col }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 导入按钮 -->
    <button 
      class="import-btn" 
      @click="importData" 
      v-if="tableData.length > 0"
      :loading="isLoading"
    >
      导入到数据库
    </button>
    
    <!-- 提示信息 -->
    <view class="message" v-if="message">{{ message }}</view>
  </view>
</template>

<script>
// 引入xlsx库
import * as XLSX from 'xlsx'

export default {
  data() {
    return {
      fileName: '',
      tableData: [],
      tableHeader: [],
      isLoading: false,
      message: ''
    }
  },
  methods: {
    // 选择Excel文件
    chooseExcel() {
      const _this = this
      this.resetState()
      
      uni.chooseFile({
        count: 1,
        type: 'file',
        accept: ['.xlsx', '.xls'],
        success(res) {
          _this.fileName = res.tempFiles[0].name
          
          // 根据不同平台使用不同的文件读取方式
        if (process.env.UNI_PLATFORM === 'h5')
            // H5平台使用FileReader
            _this.readExcelByFileReader(res.tempFiles[0])
         if (process.env.UNI_PLATFORM === 'MP-WEXIN')
            // 微信小程序使用FileSystemManager
            _this.readExcelByWxFileSystem(res.tempFilePaths[0])
          if (process.env.UNI_PLATFORM === 'APPPLUS')
            // App平台使用plus.io
            _this.readExcelByPlusIo(res.tempFilePaths[0])
         else
            // 其他平台尝试通用方法
            _this.readExcelByUniversal(res)
  
        },
        fail(err) {
          console.error('选择文件失败', err)
          _this.message = '选择文件失败，请重试'
        }
      })
    },
    
    // H5平台：使用FileReader
    readExcelByFileReader(file) {
             const _this = this
             const reader = new FileReader()
             
             reader.onload = function(e) {
               try {
                 // 1. 增加数据有效性校验
                 if (!e.target.result) {
                   throw new Error('文件内容为空')
                 }
                 
                 // 2. 确保数据格式正确（ArrayBuffer）
                 const data = e.target.result
                 let workbook;
                 
                 if (data instanceof ArrayBuffer) {
                   // 正确处理ArrayBuffer类型
                   workbook = XLSX.read(new Uint8Array(data), { type: 'array' })
                 } else if (typeof data === 'string') {
                   // 兼容字符串类型数据
                   workbook = XLSX.read(data, { type: 'binary' })
                 } else {
                   throw new Error('不支持的文件数据格式')
                 }
                 
                 _this.processWorkbook(workbook)
               } catch (e) {
                 console.error('解析Excel失败', e)
                 _this.message = `解析失败: ${e.message || '文件格式不正确'}`
               }
             }
             
             // 3. 明确指定读取格式为ArrayBuffer
             reader.readAsArrayBuffer(file)
           },

    
    // 微信小程序：使用FileSystemManager
        readExcelByWxFileSystem(filePath) {
              const _this = this
              const fs = wx.getFileSystemManager()
              
              fs.readFile({
                filePath: filePath,
                encoding: 'binary',
                success(res) {
                  try {
                    // 增加数据校验
                    if (!res.data) {
                      throw new Error('文件内容为空')
                    }
                    // 确保传递的是字符串类型
                    if (typeof res.data !== 'string') {
                      throw new Error('文件数据格式错误')
                    }
                    const workbook = XLSX.read(res.data, { type: 'binary' })
                    _this.processWorkbook(workbook)
                  } catch (e) {
                    console.error('解析Excel失败', e)
                    _this.message = `解析失败: ${e.message || '文件格式不正确'}`
                  }
                },
                fail(err) {
                  console.error('读取文件失败', err)
                  _this.message = `读取失败: ${err.errMsg || '未知错误'}`
                }
              })
            },

    
    // App平台：使用plus.io
    readExcelByPlusIo(filePath) {
             const _this = this
             
             plus.io.resolveLocalFileSystemURL(filePath, entry => {
               entry.file(file => {
                 const fileReader = new plus.io.FileReader()
                 fileReader.onloadend = function(e) {
                   try {
                     if (!e.target.result) {
                       throw new Error('文件内容为空')
                     }
                     
                     const data = new Uint8Array(e.target.result)
                     const workbook = XLSX.read(data, { type: 'array' })
                     _this.processWorkbook(workbook)
                   } catch (e) {
                     console.error('解析Excel失败', e)
                     _this.message = `解析失败: ${e.message || '文件格式不正确'}`
                   }
                 }
                 fileReader.readAsArrayBuffer(file)
               })
             }, err => {
               console.error('读取文件失败', err)
               _this.message = `读取失败: ${err.message || '未知错误'}`
             })
           },

    
    // 通用处理方法（尝试多种方式）
    readExcelByUniversal(res) {
      const _this = this
      
      try {
        // 优先尝试uni.readFile
        if (uni.readFile) {
          uni.readFile({
            filePath: res.tempFilePaths[0],
            encoding: 'binary',
            success(resData) {
              try {
                const workbook = XLSX.read(resData.data, { type: 'binary' })
                _this.processWorkbook(workbook)
              } catch (e) {
                console.error('解析Excel失败', e)
                _this.message = '解析Excel失败，请检查文件格式'
              }
            },
            fail(err) {
              console.error('uni.readFile失败', err)
              _this.message = '文件读取失败，请重试'
            }
          })
        } else if (res.tempFiles && res.tempFiles[0]) {
          // 尝试H5的FileReader方式
          _this.readExcelByFileReader(res.tempFiles[0])
        } else {
          _this.message = '当前平台不支持文件读取'
        }
      } catch (e) {
        console.error('通用读取方式失败', e)
        _this.message = '文件处理失败，请重试'
      }
    },
    
    // 处理解析后的工作簿
     processWorkbook(workbook) {
            try {
              // 增加工作表存在性校验
              if (!workbook.SheetNames || workbook.SheetNames.length === 0) {
                throw new Error('Excel文件中没有工作表')
              }
              
              const firstSheetName = workbook.SheetNames[0]
              const worksheet = workbook.Sheets[firstSheetName]
              
              // 增加工作表数据校验
              if (!worksheet) {
                throw new Error('无法获取工作表数据')
              }
              
              const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
              this.handleExcelData(jsonData)
            } catch (e) {
              console.error('处理工作簿失败', e)
              this.message = `处理失败: ${e.message || '工作表格式错误'}`
            }
          },
    // 处理Excel数据
    handleExcelData(jsonData) {
      if (jsonData.length === 0) {
        this.message = 'Excel文件中没有数据'
        return
      }
      
      // 表头
      this.tableHeader = jsonData[0]
      
      // 数据行（从第二行开始）
      this.tableData = jsonData.slice(1)
      
      this.message = `成功解析 ${this.tableData.length} 条数据`
    },
    
    // 导入数据到数据库
    importData() {
      const _this = this
      this.isLoading = true
      this.message = '正在导入数据...'
      
      // 构建请求数据
      const postData = {
        header: this.tableHeader,
        data: this.tableData
      }
      
      // 调用后端API
      uni.request({
        url: '/api/import/excel', // 后端接口地址
        method: 'POST',
        data: postData,
        success(res) {
          _this.isLoading = false
          
          if (res.data.code === 200) {
            _this.message = `成功导入 ${res.data.data.successCount} 条数据，失败 ${res.data.data.failCount} 条`
          } else {
            _this.message = res.data.message || '导入失败'
          }
        },
        fail(err) {
          _this.isLoading = false
          _this.message = '网络请求失败，请重试'
          console.error('导入数据失败', err)
        }
      })
    },
    
    // 重置状态
    resetState() {
      this.fileName = ''
      this.tableData = []
      this.tableHeader = []
      this.message = ''
    }
  }
}
</script>

<style scoped>
/* 样式与之前保持一致 */
.container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin: 30rpx 0;
}

.upload-btn {
  background-color: #007aff;
  color: white;
  margin-bottom: 20rpx;
}

.file-info {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.preview {
  width: 100%;
  margin: 20rpx 0;
}

.preview-title {
  font-size: 30rpx;
  margin-bottom: 10rpx;
  font-weight: bold;
}

.scroll-view {
  width: 100%;
  height: 100vh;
  border: 1px solid #eee;
}

.table {
  width: 100%;
  display: table;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
  padding: 10rpx;
  border: 1px solid #eee;
  font-size: 26rpx;
}

.header {
  background-color: #f5f5f5;
  font-weight: bold;
}

.import-btn {
  background-color: #00cc66;
  color: white;
  margin-top: 30rpx;
}

.message {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #ff3b30;
}
</style>
